import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../hj_model/home/home_tabs_entity.dart';
import '../../hj_utils/screen.dart';
import 'home_main_logic.dart';

class HSHomeDrawer extends StatefulWidget {
  final HomeMainLogic logic;

  HSHomeDrawer(this.logic);

  @override
  State<StatefulWidget> createState() {
    return _HSHomeDrawerState();
  }
}

class _HSHomeDrawerState extends State<HSHomeDrawer> {
  HomeMainLogic get logic => widget.logic;
  ModuleData? curTagData;
  List<ModuleData> dataArr = [];

  @override
  void initState() {
    super.initState();
    curTagData = logic.homePageTabArr[logic.tabController?.index ?? 0];
    dataArr = logic.homePageTabArr.map((e) => e).toList();
  }

  void goBack({ModuleData? selectedModel}) async {
    await logic.gotoTabDataAndResort(dataArr, selectedModel);
    Get.back();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        goBack();
      },
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
        child: Container(
          width: screen.screenWidth,
          height: screen.screenHeight,
          color: Colors.transparent,
          alignment: Alignment.topRight,
          child: Container(
            width: 212,
            height: screen.screenHeight,
            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 18),
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(color: Colors.black),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
              child: Opacity(
                opacity: 1,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(height: 32),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          '导航列表',
                          style: TextStyle(
                            color: Colors.white.withOpacity(0.9),
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        Spacer(),
                        InkWell(
                          onTap: () {
                            dataArr = logic.defaultList.map((e) => e).toList();
                            setState(() {});
                            goBack();
                          },
                          child: Container(
                            padding: EdgeInsets.fromLTRB(6, 2, 0, 6),
                            child: Text(
                              '恢复默认',
                              style: TextStyle(
                                color: Colors.white.withOpacity(0.45),
                                fontSize: 12,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 4),
                    Text(
                      '长按拖动排序',
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.45),
                        fontSize: 12,
                      ),
                    ),
                    const SizedBox(height: 18),
                    Expanded(
                      child: _buildGridContent(),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

  //抽屉列表
  Widget _buildGridContent() {
    return GridView.builder(
      padding: EdgeInsets.zero,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisSpacing: 12,
        crossAxisSpacing: 12,
        childAspectRatio: 84 / 40,
      ),
      itemCount: dataArr.length,
      itemBuilder: (context, index) {
        ModuleData tabModel = dataArr[index];
        bool isSelected = curTagData?.id == tabModel.id;
        return DragTarget<ModuleData>(
          onAccept: (draggingModel) {
            final oldIndex = dataArr.indexOf(draggingModel);
            final newIndex = dataArr.indexOf(tabModel);
            final item = dataArr.removeAt(oldIndex);
            dataArr.insert(newIndex, item);
            setState(() {});
          },
          builder: (context, candidateData, rejectedData) {
            return Draggable<ModuleData>(
              data: tabModel,
              feedback: Material(
                color: Colors.transparent,
                child: Container(
                  width: 84,
                  height: 40,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    color: Color(0xffDD2153), //isSelected ? Color(0xffDD2153) : Color(0xff21212E),
                  ),
                  child: Text(
                    tabModel.moduleName ?? "",
                    style: TextStyle(
                      fontSize: 12,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: isSelected ? Color(0xffE1351F) : Color(0x1AFFFFFF),
                ),
                child: GestureDetector(
                  onTap: () {
                    goBack(selectedModel: tabModel);
                  },
                  child: Text(
                    tabModel.moduleName ?? "",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            );
          },
        );
      },
    );
  }
}
